<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div class="box1">1111</div>
    <div class="box2">2222111</div>
    <div class="box3">3333</div>
    <div class="box4">4444</div>
    <div class="box5"></div>
    <div> <span>我是span1</span></div>
    <div>
        <span>我是span2</span>
    </div>

    <script>
        // 1.相邻选择器 ； + 下一个相邻的兄弟元素
        // $(".box1+.box2").css("color","red");
        // 2.后面的所有的兄弟元素 ；~
        // $(".box1~.box3").css("color","red");

        // 3.获取元素中索引为奇数的元素；  :odd
        // $("div:odd").css("color","red");


        // 4.获取元素中所有索引为偶数的元素： even
        // $("div:even").css("color","red");


        // 5.获取所有元素中的第一个元素；first
        // $("div:first").css("color","red");


        // 6.获取所有元素中的最后一个元素:last
        // $("div:last").css("color","red");


        // 7.选取指定索引的元素 eq(index);
        // $("div:eq(2)").css("color","red");


        // 8.选取元素索引大于某个值  gt(index);
        // $("div:gt(1)").css("color","red");


        // 9.选取元素索引小于某个值 lt(index);
        // $("div:lt(2)").css("color","red");


        // 10.选取类名不是某个类名的其他元素；not(不是这个类名)
        // $("div:not(.box3)").css("color","red");


        // 11.选取元素中包含某些文本的元素；
        // $("div:contains(1)").css("color","red");


        // 12.选取所有元素中的空元素；
        // $("div:empty").css({width:"100px",height:100,background:"red"});



        // 13.选取元素中包含某个元素的 元素；
        $("div:has(span)").css("color","red");





    </script>
</body>
</html>